﻿
@{
    ViewBag.Title = "Rack";
    Layout = "~/Views/Shared/_LayoutPage.cshtml";
    ViewBag.PageTitle = "仓库管理";
    ViewBag.PageColumn = "货架管理";
}

<div class="count-panel" style="width:100%;margin:0px auto;">
    <div class="clearfix">
        <div class="panel-body" style="padding:0px;">
            <div class="panel panel-default">
                <div class="panel-heading" id="pal-text">
                    <span class="glyphicon glyphicon-filter" aria-hidden="true"></span>查询条件<a href="javascript:;" style="text-decoration:none;float:right;"  id="btn_query"><span class="glyphicon glyphicon-search" aria-hidden="true"></span>&nbsp;查询</a>
                </div>
                <div class="panel-body">
                    <form id="formSearch" class="form-horizontal">
                        <div class="form-group">
                            <label class="control-label col-sm-1" for="txt_search_rolename">货架编号：</label>
                            <div class="col-sm-3">
                                <input type="text" class="form-control" id="txt_search_rolename">
                            </div>
                            <label class="control-label col-sm-1" for="txt_search_desc">状态</label>
                            <div class="col-sm-3">
                                <select class="selectpicker show-tick form-control" id="txt_search_statu" data-live-search="false">
                                    <option>全部</option>
                                    <option>空闲</option>
                                    <option>任务锁定</option>
                                    <option>移动中</option>
                                    <option>弃用</option>
                                </select>
                            </div>
                        </div> 
                    </form>
                </div>
            </div>
        </div>
        <div class="panel panel-default">
            <div class="panel-heading">
                <span class="glyphicon glyphicon-cog" aria-hidden="true"></span>
                数据表格
            </div>
            <div class="panel-body">
                <div id="toolbar" class="btn-group">
                    <button id="btn_add" type="button" class="btn btn-default">
                        <span class="glyphicon glyphicon-plus" aria-hidden="true" style="font-size:10px;"></span>&nbsp;新增
                    </button>
                    <button id="btn_edit" type="button" class="btn btn-default">
                        <span class="glyphicon glyphicon-pencil" aria-hidden="true" style="font-size:10px;"></span>&nbsp;修改
                    </button>
                    <button id="btn_delete" type="button" class="btn btn-default">
                        <span class="glyphicon glyphicon-remove" aria-hidden="true" style="font-size:10px;"></span>&nbsp;删除
                    </button>
                </div>
                <table id="tb_report"></table>
            </div>
        </div>
    </div>
</div>
<form>
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="myModalLabel">新增</h4>
                </div>
                <div class="modal-body">

                    <div class="form-group">
                        <label for="txt_rolename">货架编号</label>
                        <input type="text" name="rackSerialNum" class="form-control" id="rackSerialNum" placeholder="货架编号">
                        <input id="rackId" class="form-control" type="hidden" />
                    </div>
                    <div class="form-group">
                        <label for="txt_rolename">货架信息</label>
                        <input type="text" name="rack_qrInfo" class="form-control" id="rack_qrInfo" placeholder="货架信息">
                    </div>
                    <div class="form-group">
                        <label for="txt_defaulturl">货架状态</label>
                        <select class="selectpicker show-tick form-control" id="rackStatus" data-live-search="false">
                            <option value="1">空闲</option>
                            <option value="2">任务锁定</option>
                            <option value="3">移动中</option>
                            <option value="4">弃用</option>
                        </select>
                        @*<input type="text" name="rackStatus" class="form-control" id="rackStatus" placeholder="货架状态">*@
                    </div>
                    <div class="form-group">
                        <label for="txt_defaulturl_Web">占用AGV</label>
                        <input type="text" name="rack_agvSerailNum" class="form-control" id="rack_agvSerailNum" placeholder="占用AGV">
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" id="btn_close" class="btn btn-default" data-dismiss="modal"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span>关闭</button>
                    <button type="button" id="btn_submit" class="btn btn-primary"><span class="glyphicon glyphicon-floppy-disk" aria-hidden="true"></span>保存</button>
                </div>
            </div>
        </div>1
    </div>
</form>
<script>

    toastr.options = {
        showDuration: "300",                                      // 显示动画的时间
        hideDuration: "1300",                                     //  消失的动画时间
        timeOut: "1000",                                             //  自动关闭超时时间 
        extendedTimeOut: "1000",                                  //  加长展示时间
        showEasing: "swing",                                     //  显示时的动画缓冲方式
        hideEasing: "linear",                                       //   消失时的动画缓冲方式
        showMethod: "fadeIn",                                   //   显示时的动画方式
        hideMethod: "fadeOut"                                   //   消失时的动画方式
    };

    $("#btn_add").click(function () {
        $("#myModalLabel").text("新增");
        $("#myModal").find(".form-control").val("");
        $("#rackStatus").selectpicker('refresh');//刷新UI
        $('#rackStatus').selectpicker('val', "1");//绑定下拉

        $('#myModal').modal();
    });
    $("#btn_close").click(function () {
        $("#tb_report").bootstrapTable('refresh');//刷新表格
    })
    //编辑
    $("#btn_edit").click(function () {

        var a = $("#tb_report").bootstrapTable('getSelections');
        if (a.length == 1) {
            console.log(a[0]);
            $("#myModalLabel").text("修改");
            $("#myModal").find(".form-control").val("");
            $('#rackSerialNum').val(a[0].rackSerialNum);
            $('#rack_qrInfo').val(a[0].rack_qrInfo);
            $("#rackStatus").selectpicker('refresh');//刷新UI
            $('#rackStatus').selectpicker('val', a[0].rackStatus);//绑定下拉
            console.log(a[0].rackStatus);
            //$('#rackStatus').val(a[0].rackStatus);
            $('#rack_agvSerailNum').val(a[0].rack_agvSerailNum);
            $('#rackId').val(a[0].rackId);
            $('#myModal').modal('toggle');

        }
        else {
            toastr.error("请选中一行后修改！");
        }
    });

    //添加/编辑提交
    $('#btn_submit').click(function () {
        if ($("#myModalLabel").text() == "新增") {
            Addedit('/api/Rack/Rackadd');
        } else {
            Addedit('/api/Rack/editrack');
        }
    });

    //编辑/添加
    function Addedit(url) {
        $.ajax({
            type: 'post',
            url: url,
            contentType: 'application/json',
            data: JSON.stringify({ "rackId": $('#rackId').val(), "rackSerialNum": $('#rackSerialNum').val(), "rack_qrInfo": $('#rack_qrInfo').val(), "rackStatus": $('#rackStatus').val(), "rack_agvSerailNum": $('#rack_agvSerailNum').val() }),
            datatype: 'json',
            success: function (res) {
                if (res.Success) {
                    $('#myModal').modal('toggle'); //关闭Modal窗口
                    toastr.success(res.Message)
                    $("#tb_report").bootstrapTable('refresh');//刷新表格
                }
                else {
                    toastr.error(res.Message);
                }
            },
            error: function (e) {
                toastr.error(e.responseText);
            }
        });
    }
    //批量删除
    $('#btn_delete').click(function () {
        var data = $("#tb_report").bootstrapTable('getSelections');
        if (data.length > 0) {
            bootbox.confirm({
                message: "确认删除吗？",
                buttons: {
                    confirm: {
                        label: '确认',
                        className: 'btn-primary'
                    },
                    cancel: {
                        label: '取消',
                        className: 'btn-default'
                    }
                },
                callback: function (result) {
                    if (result) {
                        $.ajax({
                            type: 'post',
                            url: '/api/Rack/deletelist',
                            contentType: 'application/json',
                            data: JSON.stringify(data),
                            datatype: 'json',
                            success: function (res) {
                                if (res.Success) {
                                    toastr.success(res.Message);
                                    $("#tb_report").bootstrapTable('refresh');//刷新表格
                                }
                                else {
                                    toastr.error(res.Message);
                                    $("#tb_report").bootstrapTable('refresh');//刷新表格
                                }
                            },
                            error: function (e) {
                                toastr.error(e.responseText);
                            }
                        });
                    }
                }
            });

        } else {
            toastr.error("请选中一行后删除！");
        }

    });
    //删除货架
    function agvdelete(id) {
        bootbox.confirm({
            message: "确认删除吗？",
            buttons: {
                confirm: {
                    label: '确认',
                    className: 'btn-primary'
                },
                cancel: {
                    label: '取消',
                    className: 'btn-default'
                }
            },
            callback: function (result) {
                if (result) {
                    $.ajax({
                        type: 'post',
                        url: '/api/Rack/deleterack',
                        contentType: 'application/json',
                        data: JSON.stringify({ 'rackId': +id }),
                        datatype: 'json',
                        success: function (res) {
                            if (res.Success) {
                                toastr.success(res.Message);
                                $("#tb_report").bootstrapTable('refresh');//刷新表格
                            }
                            else {
                                toastr.error(res.Message);
                                $("#tb_report").bootstrapTable('refresh');//刷新表格
                            }
                        },
                        error: function (e) {
                            toastr.error(e.responseText);
                        }
                    });
                }
            }
        });
    }
    $(".form_datetime").
        datetimepicker({
            weekStart: 1,
            todayBtn: 1,
            autoclose: 1,
            todayHighlight: 1,
            startView: 2,
            forceParse: 0,
            language: 'zh-CN',
            format: 'yyyy-mm-dd hh:ii:ss',
            pickerPosition: 'bottom-left',
            showMeridian: 1
        });
    $(function () {

        //1.初始化Table
        var oTable = new TableInit();
        oTable.Init();

        ////条件查询click事件注册
        //$("#btn_query").click(function () {
        //    $("#tb_report").bootstrapTable('refresh');
        //});
        //查询
        $("#btn_query").click(function () {
            $("#tb_report").bootstrapTable('destroy'); //先要将table销毁，否则会保留上次加载的内容
            oTable.Init();
            $("#tb_report").bootstrapTable('refresh');
        });
    });

    var TableInit = function () {
        var oTableInit = new Object();
        //初始化Table
        oTableInit.Init = function () {
            $('#tb_report').bootstrapTable({
                url: '/API/Rack/Rack',         //请求后台的URL（*）
                method: 'get',                      //请求方式（*）
                toolbar: '#toolbar',                //工具按钮用哪个容器
                striped: true,                      //是否显示行间隔色
                cache: false,                       //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
                pagination: true,                   //是否显示分页（*）
                sortable: false,                     //是否启用排序
                sortOrder: "asc",                   //排序方式
                queryParams: oTableInit.queryParams,//传递参数（*）
                sidePagination: "server",           //分页方式：client客户端分页，server服务端分页（*）
                pageNumber: 1,                       //初始化加载第一页，默认第一页
                pageSize: 10,                       //每页的记录行数（*）
                pageList: [10, 25, 50, 100],        //可供选择的每页的行数（*）
                search: false,                       //是否显示表格搜索，此搜索是客户端搜索，
                strictSearch: true,
                showColumns: true,                  //是否显示所有的列
                showRefresh: true,                  //是否显示刷新按钮
                minimumCountColumns: 2,             //最少允许的列数
                clickToSelect: true,                //是否启用点击选中行
                //height: 500,                        //行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度
                uniqueId: "ID",                     //每一行的唯一标识，一般为主键列
                showToggle: true,                    //是否显示详细视图和列表视图的切换按钮
                cardView: false,                    //是否显示详细视图
                detailView: false,
                columns: [
                    {
                        checkbox: true
                    }, {
                        field: 'rackId',
                        title: 'ID',
                        align: 'center'
                    }, {
                        field: 'rackSerialNum',
                        title: '货架编号',
                        align: 'center'
                    }, {
                        field: 'rack_qrInfo',
                        title: '货架信息',
                        align: 'center'
                    }, {
                        field: 'rackStatus',
                        title: '货架状态',
                        align: 'center', formatter: function (value, row, index) {
                            if (value == null) {
                                return "全部";
                            }if (value == '1') {
                                return "<span class='label label-success'>空闲</span>";
                            } if (value == '2') {
                                return "<span class='label label-lock'>任务锁定</span>";
                            } if (value == '3') {
                                return "<span class='label label-move'>移动中</span>";
                            } if (value == '4') {
                                return "<span class='label label-errer'>弃用</span>";
                            }
                        }
                    }, {
                        field: 'rack_agvSerailNum',
                        title: '占用AGV',
                        align: 'center'
                    },
                    {
                        field: "agvId", title: "操作", width: 200, align: "center", formatter: function (value, row, index) {
                            var strHtml = '<a class="btn btn-xs btn-primary btn-update" onclick="agvedit(' + row.rackId + ',' + row.rackSerialNum + ',' + row.rack_qrInfo + ',' + row.rackStatus + ',' + row.rack_agvSerailNum + ')"><i class="fa fa-edit"></i>&nbsp;编辑</a>&nbsp;&nbsp;' +
                                '<a class="btn btn-xs btn-danger btn-remove"  onclick="agvdelete(' + row.rackId + ')"><i class="fa fa-trash-o"></i>&nbsp;删除</a>';
                            return strHtml;
                        }, edit: false
                    }]
            });
        };

        //得到查询的参数
        oTableInit.queryParams = function (params) {
            var temp = {   //这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的
                limit: params.limit,   //页面大小
                offset: params.offset,  //页码
                rackSerialNum: $("#txt_search_rolename").val(),
                rackStatus: $("#txt_search_statu").val()
            };
            return temp;
        };
        return oTableInit;
    };
    //编辑货架
    function agvedit(rackId, rackSerialNum, rack_qrInfo, rackStatus, rack_agvSerailNum) {
        $("#myModalLabel").text("修改");
        $('#rackSerialNum').val(rackSerialNum);
        $('#rack_qrInfo').val(rack_qrInfo);
        $("#rackStatus").selectpicker('refresh');//刷新UI
        $('#rackStatus').selectpicker('val',rackStatus);//绑定下拉
        //$('#rackStatus').val(rackStatus);
        $('#rack_agvSerailNum').val(rack_agvSerailNum);
        $('#rackId').val(rackId);
        $('#myModal').modal('toggle');
    }
</script>

